<template>
	<view class="page">
		<view class="page-ctx">
			<view class="ctx-box">
				<view class="info-box">
					<view class="info-items">
						<view class="item">
							<view class="label">
								姓名
							</view>
							<view class="val">
								<view class="input-box">
									<input v-model="form.name" type="text" value="" placeholder="姓名" class="input"
										placeholder-class="input-p" />
								</view>
							</view>
						</view>
						<view class="item">
							<view class="label">
								身份证号
							</view>
							<view class="val">
								<view class="input-box">
									<input v-model="form.idCard" maxlength="18" type="idcard" value="" placeholder="身份证号" class="input" />
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="info-box">
					<view class="info-items">
						<view class="item" >
							<view class="label">
								开户银行
							</view>
							<view class="val">
								<view class="input-box">
									<input v-model="form.bankName" type="text" value="" placeholder="开户银行" class="input"
										placeholder-class="input-p" />
								</view>
							</view>
						</view>
						
						<view class="item">
							<view class="label">
								银行卡号
							</view>
							<view class="val">
								<view class="input-box">
									<input v-model="form.bankCard" maxlength="24" type="idcard" value="" placeholder="银行卡号"
										class="input" />
								</view>
							</view>
						</view>
						
						<!-- @click="toRoute('/bank-card-list')" -->
					</view>
				</view>
			</view>
		</view>

		<view class="page-foot">
			<view class="safe-fixed-bottom">
				<view class="btns">
					<view class="btn flex-center btn-pay" @click="doSubmit()">
						提交绑定
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				form: {
					name: '',
					idCard: '',
					bankName: '',
					bankCard: '',
				}
			}
		},

		onLoad() {
			this.setView()
		},
		onShow() {

		},
		onReady() {

		},
		methods: {
			setView() {
		
			},

			doSubmit() {
				if (!this.form.name) {
					this.$alert('请输入持卡人姓名')
					return
				}
				if (!this.form.idCard) {
					this.$alert('请输入身份证号码')
					return
				}
				if (!this.form.bankName) {
					this.$alert('请输入开户银行')
					return
				}
				if (!this.form.bankCard) {
					this.$alert('请输入银行卡号')
					return
				}
				
				this.mix_throttle(this.doSubmitFn)
			},

			doSubmitFn() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'Commission_saveBank',
						...this.form
					},
				}).then(res => {
					this.$alert(res)
					if (res.code == 200) {
						this.toBack({
							time: 1500
						})
					}
				})
			}

		}
	}
</script>


<style lang="less">
	page {
		background: #FFFFFF;
	}
</style>

<style lang="less" scoped>
	.page {}

	.page-ctx {
		padding: 24rpx 32rpx;
	}



	.info-box {
		margin-bottom: 16rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 0 24rpx;
		// overflow: hidden;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
	}

	.info-items {
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: 108rpx;

			&+.item {
				border-top: 2rpx solid #F5F5F5;
			}

			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}

			.val {
				flex: 1;
				overflow: hidden;
				display: flex;
				justify-content: flex-end;
				align-items: center;


				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;

				.input-box {
					width: 100%;
					min-height: 108rpx;
				}

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}

				.text-p {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #777;
				}

				.arrow {
					margin-left: 20rpx;
					width: 12rpx;
					height: 20rpx;
				}

				input {
					font-size: 28rpx;
				}

				.input {
					height: 108rpx;
					text-align: right;
					font-size: 28rpx;
				}

				.input-p {
					font-size: 28rpx;
				}

				.input-name {
					text-align: right;
				}

			}
		}
	}




	.page-foot {
		.btns {
			width: 100%;

			.btn {
				width: 100%;
				height: 80rpx;
				border-radius: 64rpx;
				background: #CB0011;

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;

				&.btn-disabled {
					background: #DDDDDD;
				}

				&[disabled] {
					background: #DDDDDD;
				}
			}
		}
	}
</style>